<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>进群宝</title>

  <link rel="stylesheet" href="/fission/css/iconfont.css">
  <link rel="stylesheet" href="/fission/css/layui.css">
  <link rel="stylesheet" href="/fission/css/common.css">
  <link rel="stylesheet" href="/fission/css/mission.css">
  <style type="text/css">
  	#draggable{
  		position: absolute;
  		top: {if $qyFission->poster_coordinate}{json_decode($qyFission->poster_coordinate,1)['imgurl_top']}{else}338{/if}px;
  		left: {if $qyFission->poster_coordinate}{json_decode($qyFission->poster_coordinate,1)['imgurl_left']}{else}162{/if}px;
  		cursor: pointer;
  	}
  	#draggable img{
  		-webkit-user-drag: none;
  		-moz-user-drag: none;
  		-ms-user-drag: none;
  		-o-user-drag: none;
  	}
    .poster-userinfo{
      width: 110px;
      cursor: pointer;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
<form id="form1">
  <div id="app">
    <div style="padding: 36px 20px;" class="public-container">
      <div style="width: 68%;min-width: 634px" class="flex align-items-center">
        <!-- <div class="step-item" :class="{ active: currentStep > 0}">
          <span class="step-num">1</span>
          <span>活动基本信息</span>
        </div> -->
        <div class="flex-1 step-separator"></div>
        <div class="step-item" :class="{ active: currentStep > 0}">
          <span class="step-num">1</span>
          <span>设置进群海报</span>
        </div>
        <div class="flex-1 step-separator"></div>
        <div class="step-item" :class="{ active: currentStep > 1}">
          <span class="step-num">2</span>
          <span>邀请客户参与</span>
        </div>
      </div>
    </div>
  
  

    <!-- step2 - 欢迎语和海报 -->
    <section v-show="currentStep === 1" class="public-container">
      <div class="layui-form create-form poster-form">
        <div class="container-header">
          <p class=""><strong>裂变海报设置</strong></p>
          <hr>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label"><span style="color: red;">*</span> 活动名称：</label>
          <div style="width: 464px;" class="layui-input-block">
            <input type="text" name="name" id="name" value="{$qyFission->name}" required  lay-verify="required" placeholder="活动名称仅内部可见" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">裂变海报：</label>
          <div class="layui-input-block">
            <!--<input type="radio" name="poster_type" value="1" title="上传海报" checked>
            <input type="radio" name="poster_type" value="2 " title="个人名片">-->
            <!-- 海报编辑区 -->
            <div  class="flex poster-edit-container">
              <div class="poster-previewer" id="posterimgshow" style="background: url({$qyFission->poster_imgurl}) center center /cover;">
                <!--<button type="button" data-target="posterimg" class="layui-btn layui-btn-sm layui-btn-normal select_img">
                  <i class="layui-icon">&#xe654;</i>上传海报
                </button>-->
                <!--<div class="poster-qrcode" id="draggable">
                  <img  id="qun_tihuan" src="{if $qyFission->qun_imgurl}{$qyFission->qun_imgurl}{else}https://3yutop.oss-cn-beijing.aliyuncs.com/qvmhcn/ewm.png{/if} " alt="">
                </div>-->
              </div>
              <div class="flex-1 poster-edit-box">
                <p style="margin-bottom: 15px;"><strong>海报设置：</strong></p>
                <div style="margin: 20px 0 10px;">
				 <input type="hidden" name="poster_imgurl" value="{$qyFission->poster_imgurl}" id="posterimg" />
                  <button type="button" data-target="posterimg" class="layui-btn layui-btn-sm layui-btn-normal select_img">
                    <i class="layui-icon">&#xe654;</i>上传海报
                  </button>

                  <!--<input type="hidden" id="qun_img" name="qun_imgurl" value="{$qyFission->qun_imgurl}" id="posterimg" />
                  <button type="button" data-target="qun_img" class="layui-btn layui-btn-sm layui-btn-normal select_img">
                    <i class="layui-icon">&#xe654;</i>上传群活码
                  </button>-->
                </div>
                <div class="poster-tips" style="margin: 15px 0 15px 0;">
                  <p>【玩法简介】：</p>
                  <p>（1）设计裂变海报：海报上介绍群活动信息，展示群价值吸引新用户扫码；</p>
                  <p>（2）海报发送给种子用户：将海报群发给种子用户，借助优惠等吸引种子用户入群，并分享活动海报到朋友圈，吸引新用户参与；</p>
                  <p>（3）新用户扫码进群后，自动弹出欢迎语及任务介绍，分享语与活动海报，要求新用户转发到朋友圈，否则踢人；</p>
                  <p>（4）新用户保存海报发到朋友圈，并截图发到群里，艾特群主或小助理，触发关键词自动回复；</p>
				  <p>（5）群机器人（小助理）回复：感谢您的分享，小助手正在审核中，成功分享海报即可。。（活动介绍），未分享完成的将会被抱出群聊；</p>
				   <p>（6）商家人工审核截图，或按需审核。</p>
				 
				  
                </div>
              </div>
            </div>
			<input type="hidden" name="coordinate[imgurl_left]" value="162" id="imgurl_left"/>
			<input type="hidden" name="coordinate[imgurl_top]"value="338" id="imgurl_top"/>

      <input type="hidden" name="poster_fontstyle[left]" value="{$poster_fontstyle->left}" id="imgurl_left1"/>
      <input type="hidden" name="poster_fontstyle[top]"value="{$poster_fontstyle->top}" id="imgurl_top1"/>
          </div>
        </div>
        <div style="margin-top: 40px;" class="layui-form-item">
          <div class="layui-input-block">
            <!-- <button @click="prevStep" type="button" class="layui-btn layui-btn-primary">上一步</button> -->
            <button @click="nextStep" type="button" class="layui-btn layui-btn-normal">下一步</button>
          </div>
        </div>
  
  
      </div>
    </section>

    <!-- step3 - 设置推送 -->
    <section v-show="currentStep === 5" class="public-container">
      <div class="create-form layui-form" action="">
        <div class="container-header">
          <p class=""><strong>企微推送</strong></p>
          <hr>
        </div>
        <div class="flex">
          <div class="flex-1">
            <div class="layui-form-item">
              <label class="layui-form-label">给员工推送：</label>
              <div class="layui-input-block layui-input-block-float">
                <input {if $qyFission->push_staff}checked{/if} type="checkbox" name="push_staff" lay-skin="switch">
              </div>
              <div class="layui-form-mid layui-word-aux">开启后，若客户完成裂变任务，系统会给所属员工发送通知提醒</div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">给客户推送：</label>
              <div class="layui-input-block layui-input-block-float">
                <input {if $qyFission->push_customer}checked{/if} type="checkbox" name="push_customer" lay-skin="switch">
              </div>
              <div class="layui-form-mid layui-word-aux">客户裂变成功后，给客户发送裂变成功的提醒通知</div>
            </div>
            <div class="layui-form-item">
              <div class="flex push-remind">
                <p>提示：</p>
                <div class="flex-1">
                  <p>1、本次推送将占用1次「企业群发」机会，每个客户每月只可收到4次企业群发</p>
                  <p>2、如完成任务的客户本月已收次4次群发消息本条邀请将不会成功发送</p>
                </div>
              </div>
            </div>
  
            <div class="layui-form-item">
              <label class="layui-form-label">消息1：</label>
              <div class="layui-input-block rich-text-wrap">
                <div class="insert-btn">
                 <!-- <span>[插入客户昵称]</span>-->
                </div>
                <div class="rich-text-box">
                  <textarea name="push_text_content" class="layui-textarea">{$qyFission->push_text_content}</textarea>
                  <!--<p>171/4000</p>-->
                </div>
              </div>
            </div>
  
          </div>
  
          <div>
            <p style="width: 400px;margin: 41px 0 20px;text-align: center;font-size: 12px;line-height: 17px;color: rgba(0,0,0,.85);">
              <i style="font-size: 14px;color: #999;" class="layui-icon layui-icon-about"></i> 提示：需员工确认发送后客户才会收到以下推送消息
            </p>
            <div style="padding: 0 63px;" class="phone-previewer">
              <div class="phone-pre-content">
                <img src="/fission/img/phone-box.png" class="phone-bg" alt="">
                <div class="phone-content">
                  <p class="date">17:20</p>
                  <div class="phone-msg-wrap">
                    <div class="phone-msg phone-msg-text">
                      <img src="/fission/img/avatar-default.svg" class="phone-msg-avatar" alt="">
                      <div>你好，</div>
                    </div>
                    <div class="phone-msg phone-msg-news">
                      <img src="/fission/img/avatar-default.svg" class="phone-msg-avatar" alt="">
                      <div class="news">
                        <p class="title">点击这里，完成任务领取奖品吧👇</p>
                        <div>
                          <span class="desc">快来参加活动吧</span>
                          <img src="https://3yutop.oss-cn-beijing.aliyuncs.com/qvmhcn/link.png">
                        </div>
                      </div>
                    </div>
                    <div class="phone-msg phone-msg-img">
                      <img src="/fission/img/avatar-default.svg" class="phone-msg-avatar" alt="">
                      <img class="image" src="https://3yutop.oss-cn-beijing.aliyuncs.com/qvmhcn/phone.png" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style="margin-top: 40px;" class="layui-form-item">
          <div class="layui-input-block">
            <button @click="prevStep" type="button" class="layui-btn layui-btn-primary">上一步</button>
            <button {if $qyFission->id} onclick="submitForm()" {else} @click="nextStep" {/if} type="button" class="layui-btn layui-btn-normal">下一步</button>
          </div>
        </div>
      </div>
    </section>

    <!-- step3 - 邀请客户参与 -->
    <section v-show="currentStep === 2" class="public-container">
      <div class="layui-form poster-form">
        <div class="container-header">
          <p class=""><strong>选择客户参与方式</strong></p>
          <hr>
        </div>
        <div class="layui-form-item">
          <div style="margin-left: 20px;" class="layui-input-block">
            <input type="radio" name="invitation_check" value="1" title="邀请参与客户" {if $qyFission->id || $qyFission->invitation_check == 1} checked {/if}>
            <input type="radio" name="invitation_check" value="2" title="暂不邀请" {if $qyFission->invitation_check == 2} checked {/if}>
          </div>
        </div>
  
        <!-- 邀请参与客户 -->
        <section>
          <div style="margin-bottom: 5px;" class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;">*</span> 选择客户：</label>
            <div class="layui-input-block">
            <input type="radio" name="invitation_range" value="1" title="全部客户" {if $qyFission->id || $qyFission->invitation_range == 1} checked {/if}>
            <input type="radio" name="invitation_range" value="2" title="筛选客户" {if $qyFission->invitation_range == 2} checked {/if}>
            </div>
          </div>
		  <div class="layui-form-item">
          <label class="layui-form-label">筛选客户：</label>
          <div style="width: auto;" class="layui-input-inline">
            <button id="addEt" type="button" class="layui-btn layui-btn-primary">+ 选择客户</button>
          </div>
		  </div>
		  <input type="hidden" name="selected_et" value="" id="selectedEt" value="{implode(',',json_decode($qyFission->selected_et,1))}" />
          <div class="layui-form-item">
          <label class="layui-form-label"></label>
          <div class="flex align-start flex-wrap-wrap" id="selectedEtCon">
            {if count(json_decode($qyFission->selected_et,1)) >= 1 && json_decode($qyFission->selected_et,1)[0] !=""}
            {loop json_decode($qyFission->selected_et,1) as $userid}
              <div class="service-card">
                <i class="iconfont icon-person"></i>{$this->get_user_name($userid)}
              </div>
            {/loop}
            {/if}
          </div>
        </div>
        </section>
  
        <div class="container-header">
          <p class=""><strong>邀请文案</strong></p>
          <hr>
        </div>
        <div style="-webkit-box-align: start;align-items: flex-start;" class="flex">
          <div class="flex-1">
            
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color: red;">*</span> 邀请文案：</label>
              <div class="layui-input-block rich-text-wrap">
                <div class="insert-btn">
                  <!--<span>[插入客户昵称]</span>-->
                </div>
                <div class="rich-text-box">
                  <textarea name="invitation_text" class="layui-textarea"  style="height:500px">{if $qyFission->invitation_text}{$qyFission->invitation_text}{else}你好，我们正在进行xxx活动，名额有限，欢迎扫码进群！{/if}
                  </textarea>
                  <!--<p>171/4000</p>-->
                </div>
              </div>
            </div>
  
            <div style="margin-top: 40px;" class="layui-form-item">
              <div class="layui-input-block">
                <button @click="prevStep" type="button" class="layui-btn layui-btn-primary">上一步</button>
                <button onclick="submitForm()" type="button" class="layui-btn layui-btn-normal">下一步</button>
              </div>
            </div>
          </div>
  
          <div class="phone-previewer">
            <div class="phone-pre-content">
              <img src="/fission/img/phone-box.png" class="phone-bg" alt="">
              <div class="phone-content">
                <p class="date">17:20</p>
                <div class="phone-msg-wrap">
                  <div class="phone-msg phone-msg-text">
                    <img src="/fission/img/avatar-default.svg" class="phone-msg-avatar" alt="">
                    <div>你好，我们正在进行xxx活动，名额有限，欢迎扫码进群！
                    </div>
                  </div>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
	 
    </section>

  </div>
  </form> 
  
  <!-- 成员选择面板 -->
  <div style="display: none;padding: 20px;" id="serviceModel">
    <p style="font-size: 13px;margin-bottom: 20px">没有想要添加的成员？
      <span class="add-service-doc-btn" style="color: #1E9FFF;cursor: pointer;">添加成员教程</span>
    </p>
    <div class="flex justify-center">
      <div id="serviceTransfer" class="demo-transfer"></div>
    </div>
  </div>
  <!-- 新建标签组面板 -->
  <div style="display: none;padding: 20px;" id="newTagGroupModel">
    <form action="" class="layui-form form-label-large">
      <div class="layui-form-item">
        <label class="layui-form-label">标签组名称：</label>
        <div style="min-width: 0;" class="layui-input-block">
          <input type="text" name="tagGroupName" required  lay-verify="required" maxlength="15" placeholder="最多15个字" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">标签名称：</label>
        <div style="width: 50%;" class="layui-input-inline">
          <input type="text" name="tagName" required  lay-verify="required" placeholder="请输入标签名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div style="width: 50%;" class="layui-input-inline">
          <input type="text" placeholder="请输入标签名称" autocomplete="off" class="layui-input">
        </div>
        <button style="border: 0;" type="button" class="layui-btn layui-btn-sm layui-btn-primary">
          <i class="layui-icon layui-icon-delete"></i>
        </button>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
          <button class="layui-btn layui-btn-primary">
            <i class="layui-icon layui-icon-add-circle-fine"></i>&nbsp;添加标签
          </button>
        </div>
      </div>
    </form>
  </div>

  <script src="/fission/js/jquery.min.js"></script>
  <script src="/fission/js/layui.all.js"></script>
  <script src="/vue/vue.js"></script>
  <script src="/fission/js/common.js"></script>
  <script src="/js/ajax.js"></script>
  <script>
    // Vue控制示例
    var app = new Vue({
      el: '#app',
      data: function() {
        return {
          currentStep: 1,
          autoFriend: true,
          posterAvatar: true,
          posterNickname: true,
        }
      },
      mounted() {
        init();
        layui.use(['form'], function(){
          layui.form.render();
        })
      },
      updated:function() {
        // layui悄咪咪的用了Vue的模板引擎，需要重载 以解决radio、checkbox等失效
        layui.use(['form'], function(){
          layui.form.render();
        })
      },
      methods: {
        prevStep() {
          this.currentStep -= 1
        },
        nextStep() {
          if (this.currentStep >= 4) {			
            alert(formData);
            return
          }else if(this.currentStep == 1){
			if(!$('#name').val()){
				tusi('请输入活动名称');
				return
			}
			
		  }
          this.currentStep += 1
        }
      }
    })

	function submitForm(){
		var formData = $('#form1').serialize();	
		//alert(formData);return;
		myAjaxPost(false, true, '', formData, function (resp) {
			if (resp.status == 'success') {
				tusi(resp.msg);
				setTimeout(function(){
					location.href = 'mission_list.html'; 
				},2000);
			}else{
				alert(resp.msg);
			}
		});
	}
	
    function init() {
      var $ = $ || layui.$;
      // 成员选择穿梭框
      layui.transfer.render({
        elem: '#serviceTransfer'
        ,title: ['全部成员', '已选成员']
        ,data: [
          { "value": "1", "title": "李白"}
          ,{ "value": "2", "title": "杜甫"}
          ,{ "value": "3", "title": "苏轼"}
          ,{ "value": "4", "title": "李清照"}
          ,{ "value": "5", "title": "鲁迅", "disabled": true}
          ,{ "value": "6", "title": "巴金"}
          ,{ "value": "7", "title": "冰心"}
          ,{ "value": "8", "title": "矛盾"}
          ,{ "value": "9", "title": "贤心"}
        ]
        ,showSearch: true
        ,onchange: function(obj, index){
          var arr = ['左边', '右边'];
          layer.alert('来自 <strong>'+ arr[index] + '</strong> 的数据：'+ JSON.stringify(obj)); //获得被穿梭时的数据
        }
      })
      $(document).on('click', '.add-service', function() {
        var type = $(this).data('type');
        console.log(type);
        showServiceTransfer(type)
      })
      function showServiceTransfer(type) {
        // type 哪里触发的
        layer.open({
          type: 1
          ,title: '添加成员'
          ,closeBtn: true
          ,area: '688px'
          ,id: 'addService' //设定一个id，防止重复弹出
          ,content: layui.$('#serviceModel')
          ,btn: ['确定', '取消', '联系客服']
          ,yes: function(index, layero) {
            //按钮【按钮一】-确定 的回调
          }
          ,btn3: function(index, layero){
            // 按钮【按钮三】-联系客服 的回调
          }
        })
      }
      // 成员添加教程
      $(document).on('click', '.add-service-doc-btn', showAddDoc)
      function showAddDoc() {
        layer.open({
          type: 1
          ,title: '如何添加成员'
          ,closeBtn: true
          ,area: '688px'
          ,id: 'addServiceDoc' //设定一个id，防止重复弹出
          ,content: layui.$('#addServiceDocModel')
          ,btn: ['知道了']
          ,yes: function(index, layero) {
            layer.close(index)
          }
        })
      }

      // 新建标签组
      $(document).on('click', '.add-group', showNewTagGroup)
      function showNewTagGroup() {
        layer.open({
          type: 1
          ,title: '新建标签组'
          ,closeBtn: true
          ,area: '500px'
          ,id: 'newTagGroup' //设定一个id，防止重复弹出
          ,content: layui.$('#newTagGroupModel')
          ,btn: ['确定', '取消']
          ,yes: function(index, layero) {
            //按钮【按钮一】-确定 的回调
            layer.close(index)
          }
        })
      }

      // 活动结束时间
      layui.laydate.render({
        elem: '#endTime'
        ,type: 'datetime'
		,min: 0
      });

      /**
       * STEP 2
       */

      layui.use('colorpicker', function() {
        var colorpicker = layui.colorpicker;
        //渲染
        colorpicker.render({
          elem: '#nicknameColorPicker',  //绑定元素
          color: '#000000',
          done: function(color) {
            console.log(color)
          }
        });
      });

      layui.use('upload', function() {
        var upload = layui.upload;
        // 海报背景图上传
        upload.render({
          elem: '.poster-upload-btn'
          ,url: 'https://httpbin.org/post' //改成您自己的上传接口
          ,done: function(res){
            layer.msg('上传成功');
          }
        })
        // 企业logo上传
        upload.render({
          elem: '#idcardLogoUpload'
          ,url: 'https://httpbin.org/post' //改成您自己的上传接口
          ,done: function(res){
            // layer.msg('上传成功');
            layui.$('#idcardLogoPre').removeClass('layui-hide').find('img').attr('src', res.files.file);
          }
        })
        // 链接封面上传
        upload.render({
          elem: '#linkCoverUpload'
          ,url: 'https://httpbin.org/post' //改成您自己的上传接口
          ,done: function(res){
            layui.$('.poster-cover img').attr('src', res.files.file)
          }
        })
      })

      /**
       * STEP 3
       */
      layui.use('upload', function() {
        var upload = layui.upload;
        // 推送消息2-图片
        upload.render({
          elem: '#pushMsgImgUpload'
          ,url: 'https://httpbin.org/post' //改成您自己的上传接口
          ,done: function(res){
            // layer.msg('上传成功');
            layui.$('#pushMsgImgPre').removeClass('layui-hide').find('img').attr('src', res.files.file);
          }
        })
      })

      /**
       * STEP 4
       */
      layui.use('colorpicker', function() {
        var colorpicker = layui.colorpicker;
        //渲染
        colorpicker.render({
          elem: '#nicknameColorPicker',  //绑定元素
          color: '#000000',
          done: function(color) {
            console.log(color)
          }
        });
      });

      layui.use('upload', function() {
        var upload = layui.upload;
        // 企业logo上传
        upload.render({
          elem: '#idcardLogoUpload'
          ,url: 'https://httpbin.org/post' //改成您自己的上传接口
          ,done: function(res){
            // layer.msg('上传成功');
            layui.$('#idcardLogoPre').removeClass('layui-hide').find('img').attr('src', res.files.file);
          }
        })
        // 链接封面上传
        upload.render({
          elem: '#linkCoverUpload'
          ,url: 'https://httpbin.org/post' //改成您自己的上传接口
          ,done: function(res){
            layui.$('.poster-cover img').attr('src', res.files.file)
          }
        })
      })

      layui.use('laydate', function(){
        var laydate = layui.laydate;

        // 邀请日期范围
        laydate.render({
          elem: '#invitationDateRange'
          ,range: true
        });
      })

    }
    
  </script>
  <script>
  $('#addPeople').on('click',function(){
	layer.open({
		type: 2,
		title: '请选择使用人员',
		shadeClose: true,
		shade: 0.2,
		area: ['700px', '530px'],
		content: 'select_user-1.html'
		}); 
	})
	$('#addLable').on('click',function(){
		layer.open({
		type: 2,
		title: '请选择标签',
		shadeClose: true,
		shade: 0.2,
		area: ['700px', '530px'],
		content: 'select_tag.html'
		}); 
	})
	$('#addEt').on('click',function(){
		layer.open({
		type: 2,
		title: '请选择客户',
		shadeClose: true,
		shade: 0.2,
		area: ['700px', '530px'],
		content: 'select_et.html'
		}); 
	})
	function select_custom(){
		layer.open({
			type: 2,
			title: '请选择员工',
			shadeClose: true,
			shade: 0.2,
			area: ['700px', '530px'],
			content: 'select_user-2.html'
		});
	}
	function checkNum(a){
		var val = a.value;
		if (val=='') { 
　　　　　　a.value = 100;
　　　　}else if(!(/(^[1-9]\d*$)/.test(val))){
			a.value = 100;
		}else if(val > 100){
			a.value = 100;
		}
	}
	$('.select_img').on('click',function  () {
	  var targetId=this.getAttribute('data-target');
	  layer.open({
		title:'图片库',
		type: 2,
		area: ['700px', '450px'],
		fixed: false, //不固定
		maxmin: false,
		content: '/imgLib/lib.html?type=vshop_img&target='+targetId
	  });
	})

	window.uploadImgCallback=function (tgt,url) {
	  console.log('选择图片结果',tgt,url);
	  if(tgt=='posterimg'){
		var inputEle=$('#posterimg');
		var prevEle=$('#posterimgshow');
		inputEle.val(url);
		prevEle.css('background',"url("+url+")center center /cover");
		//prevEle.show();
	  }else if(tgt=='link_pic'){
		var inputEle=$('#link_pic');
		var prevEle=$('#pic_link_pic');
		inputEle.val(url);
		prevEle.attr('src',url);
		//prevEle.show();
	  }else if(tgt=='push_image'){
		var inputEle=$('#push_image');
		var prevEle=$('#pic_push_image');
		inputEle.val(url);
		prevEle.attr('src',url);
		prevEle.show();
	  }else if(tgt=='invitationLinkPic'){
		var inputEle=$('#invitationLinkPic');
		var prevEle=$('#pic_invitationLinkPic');
		inputEle.val(url);
		prevEle.attr('src',url);
		//prevEle.show();
	  }else if(tgt=='lj_qrcode'){
		var inputEle=$('#lj_qrcode');
		var prevEle=$('#pic_lj_qrcode');
		inputEle.val(url);
		prevEle.attr('src',url);
		prevEle.show();
	  }else if(tgt=='qun_img'){
		var inputEle=$('#qun_img');
		var prevEle=$('#qun_tihuan');
		inputEle.val(url);
		prevEle.attr('src',url);
		prevEle.show();
	  }
	};

  </script>
  <!-- 拖拽 -->
  <script>
    $('#size').change(function () {
      // alert($('#size').val());
      $('#nicheng').attr('size',$('#size').val());
        
      });

      //获取需要拖拽的元素
      var divs = document.querySelector('#draggable');
      //元素的鼠标落下事件
      divs.onmousedown = function(ev){

          //event的兼容性
          var ev = ev||event;

          //获取鼠标按下的坐标
          var x1 = ev.clientX;
          var y1 = ev.clientY;

          //获取元素的left，top值
          var l = divs.offsetLeft;
          var t = divs.offsetTop;

          //给可视区域添加鼠标的移动事件
          document.onmousemove = function(ev){

              //event的兼容性
              var ev = ev||event;

              //获取鼠标移动时的坐标
              var x2 = ev.clientX;
              var y2 = ev.clientY;

              //计算出鼠标的移动距离
              var x = x2-x1;
              var y = y2-y1;

              //移动的数值与元素的left，top相加，得出元素的移动的距离
              var lt = y+t;
              var ls = x+l;
              if(lt>=338){
              	lt = 338
              }
              if(lt<=0){
              	lt = 0
              }
              if(ls<=0){
              	ls = 0
              }
              if(ls>=162){
              	ls = 162
              }
              //更改元素的left，top值
              divs.style.top = lt+'px';
              divs.style.left = ls+'px';
			  $('#imgurl_left').val(ls);
			  $('#imgurl_top').val(lt);
          }

          //清除
          document.onmouseup = function(ev){

              document.onmousemove = null;

          }

      }

  </script>

  <script>
  layui.use('colorpicker', function(){
    var $ = layui.$
    ,colorpicker = layui.colorpicker;
    
    //表单赋值
    colorpicker.render({
      elem: '#test-form'
      ,color: '#1c97f5'
      ,done: function(color){
        $('#test-form-input').val(color);
        $('#nicheng').attr('color',color);
        
      }
    });

  });
  </script>
</body>
</html>